<script lang="ts" setup>
import { defineProps } from "vue"
import { Menu } from "@element-plus/icons-vue"
import { reactive, ref, watch, computed } from "vue"
import { usePagination } from "@/hooks/usePagination"
import type { VxeTablePropTypes, VxeTableEvents } from "vxe-table"
import BeSwitch from "@/components/Beautiful/BeSwitch.vue"
import ComDataDict from "@/views/com/ComDataDict.vue"
const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

const pageData = ref({
  currentOptionRow: {} as any,
  dialogTableConfigVisible: false,
  dialogSelectEnumVisible: false,
  isSwitchOn: false
})

const tableData = ref([
  {
    field: "factoryCode",
    fieldName: "工厂编码",
    width: 0,
    listItemType: "1",
    ifEnum: true,
    dataEnumCode: "sex",
    enumData: [
      { value: "1", label: "开启", classType: "primary" },
      { value: "2", label: "关闭", classType: "danger" }
    ]
  },
  {
    field: "factoryCode",
    fieldName: "工厂名称",
    width: 0,
    listItemType: "1",
    ifEnum: true,
    dataEnumCode: "sex",
    enumData: [
      { value: "1", label: "开启", classType: "primary" },
      { value: "2", label: "关闭", classType: "danger" }
    ]
  },
  {
    field: "factoryCode",
    fieldName: "工厂描述",
    width: 0,
    listItemType: "1",
    ifEnum: true,
    dataEnumCode: "sex",
    enumData: [
      { value: "1", label: "开启", classType: "primary" },
      { value: "2", label: "关闭", classType: "danger" }
    ]
  }
])

const rowConfig = reactive<VxeTablePropTypes.RowConfig<any>>({
  useKey: true,
  drag: true
})

// 选择枚举
const handleFocusDataEnumCode = (rowData: object, event: Event) => {
  pageData.value.currentOptionRow = rowData
  const inputElement = event.target as HTMLInputElement
  inputElement.blur()
  pageData.value.dialogSelectEnumVisible = true
}

const openTableConfig = () => {
  pageData.value.dialogTableConfigVisible = true
}

const handleDataDictSelectRowDbclick = (row: any) => {
  // const updateValue = row.dataDictCode
  // console.log("123", updateValue, row['field']);
  const rowIndex = tableData.value.findIndex((item) => item["field"] === pageData.value.currentOptionRow["field"])
  console.log("rowIndex", rowIndex)
  if (rowIndex !== -1) {
    // 更新找到的行数据
    // console.log("row.dataEnumCode", row['dataDictCode'], row.dataEnumCode);
    tableData.value[rowIndex].dataEnumCode = row["dataDictCode"]
  }
  // 关闭枚举选择弹窗
  pageData.value.dialogSelectEnumVisible = false
}

const syncCustomTable = () => {}
</script>
<template>
  <div>
    <span class="table-config-button">
      <el-button type="" :icon="Menu" circle @click="openTableConfig" />
    </span>

    <!-- <vxe-toolbar ref="toolbarRef" custom></vxe-toolbar> -->
  </div>

  <el-dialog v-model="pageData.dialogTableConfigVisible" title="自定义表单配置" width="70%">
    <div style="margin-bottom: 10px; display: flex; width: 100%; justify-content: right">
      <el-button plain type="primary" @click="syncCustomTable">同步配置</el-button>
    </div>
    <div class="table-wrapper">
      <vxe-table
        border
        ref="tableRef"
        :row-config="rowConfig"
        :data="tableData"
        :edit-config="{ mode: 'row', trigger: 'click' }"
      >
        <vxe-column type="seq" title="序号" width="100" />
        <vxe-column title="" drag-sort width="60" />
        <vxe-column field="field" title="字段名" />
        <vxe-column field="fieldName" title="字段中文名" />
        <vxe-column field="width" title="字段宽度" />
        <vxe-column field="listItemType" title="列表显示类型" />
        <vxe-column field="ifEnum" title="是否枚举">
          <template #default="{ row }">
            <div style="height: 32px">
              <BeSwitch
                :key="row.field"
                v-model="row.ifEnum"
                label="打开"
                id="switch1"
                size="small"
                :onText="' 是 '"
                :offText="' 否 '"
              />
            </div>
          </template>
        </vxe-column>
        <vxe-column field="enumData" title="枚举code">
          <template #default="{ row }">
            <el-input
              :disabled="!row.ifEnum"
              v-model="row.dataEnumCode"
              @focus="(event: any) => handleFocusDataEnumCode(row, event)"
              placeholder=""
            />
          </template>
        </vxe-column>
        <vxe-column field="remark" title="备注" />
        <!-- <vxe-column field="listClass" title="回显样式" width="200" :edit-render="{}" align="left">
            <template #edit="{ row }">
              <vxe-select v-model="row.listClass" :options="listClassOptions">
                <template #option="{ option }">
                  <span> <el-tag :type="option.value || ''"><span>{{ option.label }}</span></el-tag> </span>
                </template>
              </vxe-select>
            </template>
            <template #default="{ row }">
              <span>
                <el-tag :type="row.listClass"><span > {{ findEnumLabel(row.listClass) }}</span></el-tag>
              </span>
            </template>
          </vxe-column> -->
        <vxe-column field="createTime" title="创建时间" />
        <vxe-column field="modifiedTime" title="修改时间" />
      </vxe-table>

      <div style="margin-top: 10px; display: flex; width: 100%; justify-content: center">
        <el-button @click="">取消</el-button>
        <el-button type="primary" @click="">保存</el-button>
      </div>
    </div>
  </el-dialog>

  <el-dialog v-model="pageData.dialogSelectEnumVisible" title="绑定枚举" width="70%">
    <ComDataDict @rowDbclick="handleDataDictSelectRowDbclick" />
  </el-dialog>
</template>

<style scoped lang="scss">
.table-config-button {
  padding: 5px;
  display: flex;
  justify-content: flex-end;
}
</style>
